// 目录配置
// 因为我们的webpack.config.js文件不在项目根目录下，所以需要一个路径的配置
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.jsx'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录,
  output: {
      path: path.resolve(__dirname, 'dist'), // 设置输出目录
      filename: 'js/app.[hash].js' // 打包后文件
    // publicPath:'./' //打包后的路径引用问题，
  },
  // 3.5.5 extensions 不能使用‘’空字符串，
  resolve: {
    extensions: ['.less', '.js', '.jsx'], // 配置简写，配置过后，书写该文件路径的时候可以省略文件后缀
    alias: {
      Components: path.resolve(__dirname, 'src/components'),
      Modules: path.resolve(__dirname, 'src/modules'),
      Router: path.resolve(__dirname, 'src/router'),
      Statics: path.resolve(__dirname, 'src/statics')

    }
  },
  // module 3.5.5的注意事项：使用test use,且use为数组，不能省略-loader,
  module: {
    rules: [
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ],exclude: /node_modules/},
      { test: /\.less$/, use: [ 'style-loader', 'css-loader', "less-loader" ],exclude: /node_modules/},
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "eslint-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": ["env", "react"]
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|bmp|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    // html模板插件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/index.html'),
      inject: true
    }),
    // 自动打开浏览器  这里打开失败  似乎覆盖了了devServer这个配置  所以先还是手动在浏览器中输入地址吧！热更新叶配置失败了
    // new OpenBrowserPlugin({
    //   url: 'http://localhost:9000'
    // }),
    // 热加载插件
    new webpack.HotModuleReplacementPlugin(),
    // 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
    // new webpack.DefinePlugin({
    //   __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    // })
  ],
  // 热更新不起作用，报错说： TypeError: lastHash is undefined 因为他是根据dist下js的hash值进行对比的，所以我的output文件名称必须携带hash才可以
  // 但是感觉配置了之后重新 npm run dev发现有没用了？？？？
  devServer: {
    contentBase: "dist", //本地服务器所加载的页面所在的目录 默认根目录
    historyApiFallback: true, //不跳转
    inline: true, //实时刷新
    // hot: true,  // 使用热加载插件 HotModuleReplacementPlugin
    compress: true,
    port:9000
  }
};